import React,{ Component } from 'react';
import {
	StyleSheet,
	View,
	Button,
	Text,
	Image,
	FlatList,
	TouchableOpacity
} from 'react-native';
import Axios from '../../axios';
import NavigationService from '../../common/NavigationService';
import StorageUtil from '../../common/storageUtil';
import NoDataPage from '../../common/NoDataPage';

class ReportCell extends Component{

	constructor(props) {
		super(props);
		console.log("constructor:ReportCell")
		this.state = {
			collect:props.item.IS_COLLECT
		}
	}

	_gotoDetail = (item)=>{
		NavigationService.navigate('ReportDetail',{
			id:item.MENU_ID,
			name:item.name
		})
	}

	_collect = (menuId) =>{
		StorageUtil.getItem(global.Constants.USER_COLLECT, []).then((arr)=>{
			console.log("collect before :"+JSON.stringify(arr));
			if( Array.isArray(arr)==false ){
				arr = new Array();
			}
			let pos = arr.indexOf(menuId);
			if( pos==-1 ){
				arr.push(menuId);
				this.setState({collect:true});
			}else{
				arr.splice(pos, 1);
				this.setState({collect:false});
			}
			console.log("collect after :"+JSON.stringify(arr));
			StorageUtil.setItem(global.Constants.USER_COLLECT, arr);
		});
	}

	isCollect = (menuId) =>{
		StorageUtil.getItem(global.Constants.USER_COLLECT, []).then((arr)=>{
			console.log("collect now :"+JSON.stringify(arr));
			if( Array.isArray(arr) ){
				if( arr.indexOf(menuId)!=-1 ){
					this.setState({collect:true});
				}
			}
		});
	}

	componentWillReceiveProps(){
		//this.isCollect(this.props.item.MENU_ID);
		this.setState({collect:this.props.item.IS_COLLECT});
	}

	componentDidMount(){
		//this.isCollect(this.props.item.MENU_ID);
		this.setState({collect:this.props.item.IS_COLLECT});
	}

	//componentWillUpdate(nextProps, nextState) {
  	// this.setState({collect:nextProps.item.IS_COLLECT});
		//console.log("componentWillUpdate"+JSON.stringify(nextProps));
		//console.log("componentWillUpdate"+JSON.stringify(nextState));
  //}

	render(){
		return  <View style={styles.reportCellWrap}>
					<TouchableOpacity
						onPress={()=>this._gotoDetail(this.props.item)}
					>
			    	<View style={styles.reportHeaderWrap}>
			    		<View style={styles.reportHeaderTitle}>
			    			<Image
								style={styles.reportHeaderImg}
			    				source={require('../../assets/images/daily_report.png')} />
			    			<Text style={styles.reportHeaderTxt}>{this.props.item.MENU_TITLE}({this.props.item.DATE})</Text>
			    		</View>
			    		<Image
			    			style={styles.reportHeaderRightIcon}
			    			source={require('../../assets/images/arrow_right.png')} />
			    	</View>
			    	<View style={styles.reportCellContentWrap}>
			    		<Text style={styles.reportContentTopTxt}>{this.props.item.TOTAL_TITLE}</Text>
			    		<Text style={styles.reportContentTotal}>{this.props.item.TOTAL}<Text style={styles.reportContentUnit}>{this.props.item.TOTAL_UNIT}</Text></Text>
			    		<View style={styles.reportContentBottomWrap}>
			    			<Text style={styles.reportContentBottomTxt}>{this.props.item.DETAIL1}</Text>
			    			<Text style={styles.reportContentBottomTxt}>{this.props.item.DETAIL2}</Text>
			    		</View>
			    	</View>
		    	</TouchableOpacity>
				<TouchableOpacity
					onPress={()=>this._collect(this.props.item.MENU_ID)}
				>
			    	<View style={styles.collectWrap}>
			    		<View style={styles.collectContent}>
				    		{this.state.collect?<Image
				    			style={styles.collectImg}
								source={require('../../assets/images/collected.png')}
				    		/>:<Image
				    			style={styles.collectImg}
								source={require('../../assets/images/collect.png')}
				    		/>}
				    		{this.state.collect?<Text
								style={{color:"#f54545",fontSize:14}}
				    		>已收藏</Text>:<Text
								style={{fontSize:14}}
				    		>收藏</Text>}
			    		</View>
			    	</View>
				</TouchableOpacity>
			</View>

	}
}

export default class ReportCommon extends Component{
	state = {
		reportList:[],
		isRefresh:true,
		isEmpty:false,
	}

	getReportList = ()=>{
		const routeName = this.props.navigation.state.routeName;
		let url = ''

		if(routeName === 'DailyReport'){
			url = '/app/getMenu/1';
		}else if(routeName === 'MonthReport'){
			url = '/app/getMenu/2';
		}else{
			url = 'app/getMenu/3';
		}

		Axios.ajax({
			url:url
		}).then((res)=>{
			console.log("getMenu="+JSON.stringify(res));
			if( res.data.length==0 ){
				this.setState({isEmpty:true});
			}else{
				this.setState({isEmpty:false});
			}

			// 获取当前收藏的菜单id
			StorageUtil.getItem(global.Constants.USER_COLLECT, []).then((arr)=>{
				console.log("collect after getMenu :"+JSON.stringify(arr));
				if( Array.isArray(arr) ){
					for(let a of res.data){
						if( arr.indexOf(a.MENU_ID)!=-1){
							a.IS_COLLECT = true;
						}else{
							a.IS_COLLECT = false;
						}
					}
				}
				this.setState({reportList:res.data, isRefresh:false});
			});

		})
	}

	componentDidMount(){
		this.subs = [this.props.navigation.addListener('didFocus', () => this.getReportList()),]
	}

	componentWillUnmount() {
		this.subs.forEach(sub => sub.remove());
	}

	onRefresh = ()=>{
		this.getReportList();
	}

	render(){
		return(
			<View style={styles.container}>
				<FlatList
					data={this.state.reportList}
					//extraData={this.state}
			 		keyExtractor={(item)=>item.MENU_ID.toString()}
			    renderItem={({item}) => (<ReportCell item={item}/>)}
			    onRefresh={() => this.onRefresh()}
  				refreshing={this.state.isRefresh}
					ListEmptyComponent={<NoDataPage text="暂无可用报表"/>}
				/>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	container : {
		flex : 1,
		backgroundColor:'#f5f5f5'
	},
	textColor:{
		color:'#f00'
	},
	reportCellWrap:{
		backgroundColor:"#fff",
		marginTop:8
	},
	reportHeaderWrap:{
		flex:1,
		flexDirection:'row',
		alignItems:"center",
		padding:10,
		borderBottomWidth:1,
		borderBottomColor:"#f7f7f7"
	},
	reportHeaderTitle:{
		flex:1,
		flexDirection:'row',
		alignItems:"center"
	},
	reportHeaderImg:{
		width:16,
		height:18,
		marginRight:5
	},
	reportHeaderTxt:{
		fontSize:14
	},
	reportHeaderRightIcon:{
		width:16,
		height:18
	},
	reportCellContentWrap:{
		flex:1,
		justifyContent:"center",
		marginTop:20,
		marginBottom:20
	},
	reportContentTopTxt:{
		textAlign:"center",
		fontSize:14
	},
	reportContentTotal:{
		textAlign:"center",
		fontSize:26,
		color:"#f54545",
		marginTop:10,
		marginBottom:10
	},
	reportContentUnit:{
		fontSize:12,
		fontWeight:"bold"
	},
	reportContentBottomWrap:{
		flex:1,
		flexDirection:"row",
		justifyContent:"center"
	},
	reportContentBottomTxt:{
		fontSize:14,
		marginRight:10,
		marginLeft:10
	},
	collectWrap:{
		paddingLeft:20,
		paddingRight:20
	},
	collectContent:{
		flex:1,
		flexDirection:"row",
		justifyContent:"center",
		alignItems:"center",
		borderTopWidth:1,
		borderTopColor:"#f7f7f7",
		paddingTop:10,
		paddingBottom:10
	},
	collectImg:{
		width:20,
		height:20,
		marginRight:5
	}
})
